<template>
  <el-form-item label="验证码" prop="code">
    <el-input @input="inputChange" :value="value">
      <div @click="changeCode" class="code-img w-flex-center" slot="append" v-html="codeImg" />
    </el-input>
  </el-form-item>
</template>

<script lang="ts">
  import { Vue, Component, Model } from 'vue-property-decorator'
  import { GlobalApi } from "@/api/apis";
  import { get } from '@/api/ajax'

  @Component({
    name: 'ComCodeInput',
  })
  export default class CodeInput extends Vue {

    codeImg = ''
    uuid = ''

    changeCode() {
      get<{img: string; uuid: string}>(GlobalApi.verificationCode).then((data) => {
        this.codeImg = data.img
        this.uuid = data.uuid
      })
    }

    @Model('change', { type: String }) value!: string

    inputChange(text: string) {
      this.$emit('change', text)
    }

    mounted() {
      this.changeCode()
    }
  }
</script>

<style scoped>
  .code-img {
    width: 80px;
    height: 38px;
    cursor: pointer;
  }
</style>
